---
title: Box
description: The Box component can be used for simple flex and grid layouts that have spacing between each item. This should be the go-to component for creating layouts or spacing items on the page.
docType: Demo
docGroup: Components
group: Layout
alias: [Grid, CSS Box Model, Flex]
components: [Box]
---

# Box

The `Box` component can be used for simple `flex` and `grid` layouts that have
spacing between each item. This should be the go-to component for creating
layouts or spacing items on the page.

> !Warn! Most of these examples are only available on desktop due to limited
> demo preview

## Flex Example

The `Box` defaults to using `display: flex`, `align-items: center`,
`justify-content: center`, `padding: 1rem`, and `gap: 1rem`.

> !Info! The `padding` and `gap` can be configured globally by changing the
> [$SASSDOC](box-gap) and [$SASSDOC](box-padding) Sass variables.

```demo source="./FlexExample.tsx"

```

### Disable Flex Wrap

Enable the `disableWrap` prop to prevent line wrapping and instead attempt to
shrink each item to fit on a single line.

```demo source="./DisableFlexWrap.tsx" disableBox

```

### Additional Flex Options

The following flex options can be configured by props:

- `align` - `"start" | "center" | "end" | "stretch"`
- `justify` - `"start" | "center" | "end" | "stretch" | "space-around" | "space-between" | "space-evenly"`
- `fullWidth` - apply `width: 100%`
- `disablePadding` - do not apply the default padding
- `stacked` - set `flex-direction: column`
- `reversed` - set `flex-direction: row-reverse` or `flex-direction: column-reverse` when `stacked` is enabled

See the example below to see how these props can be used.

```demo source="./AdditionalFlexOptionsExample.tsx" disableBox

```

## Grid Example

Enable the `grid` prop to render equal width dynamic columns that will be at
least `8rem` wide.

> !Info! The min width can be configured globally by changing the
> [$SASSDOC](box-item-min-size) Sass variable.

```demo source="./GridExample.tsx" disableBox

```

### Custom Grid Name

As the app grows it might be useful to define different grid variants that
provide different min item size, gap, and/or padding. The variants can be
configured by setting the [$SASSDOC](box-grids) variable when `@forward`-ing or
`@use`-ing `@react-md/core`. Each mapped name will be available as a `gridName`
on the `Box` component.

```demo source="./CustomGridNameExample.tsx" disableBox

```

### Customizing Gap, Padding, and Min Item Size

The `gap`, `padding`, and min item size for part of the DOM using the
[$SASSDOC](box-set-var) mixin or a custom class name on the `Box` component.

> !Success! The `gap` and `padding` are also available for the `flex` version
> of the `Box`.

```demo source="./CustomizingGapPaddingAndMinItemSize.tsx" disableBox

```

### Auto-fill Grid Columns

The grid defaults to using `auto-fit` but can be configured to `auto-fill`
by setting `gridColumns="fill"`. To help explain the difference between the two:

- `auto-fit` - fill the entire width with columns and stretch columns to fill
  the remaining space
- `auto-fill` - fill the entire width with columns and add empty columns to
  fill the remaining space

Try changing the `ITEMS` value below to see the difference.

```demo source="./AutoFillGridColumnsExample.tsx" disableBox

```

### Custom Grid Columns

If a specific number of columns should be enforced, set the `gridColumns` prop
to that number.

```demo source="./CustomGridColumnsExample.tsx" disableBox

```

### Grid Column Media Queries

The `gridColumns` prop also supports setting different column behavior based on the
defined media queries:

- `phone` - [$SASSDOC](phone-media)
- `tablet` - [$SASSDOC](tablet-media)
- `desktop` - [$SASSDOC](desktop-media)
- `largeDesktop` - [$SASSDOC](large-desktop-media)

Each of the breakpoints can be `"fit"`, `"fill"`, or a number of columns.

```demo source="./GridColumnMediaQueries.tsx" disableBox

```

### Grid Auto Rows

To create rows with an equal height, enable the `gridAutoRows` restrict
the height through CSS. This is most useful when handling unknown sized items
(like file uploads).

> !Success! Check out the [useFileUpload](/hooks/use-file-upload) for another
> example using auto rows.

```demo source="./GridAutoRowsExample.tsx"

```

### Additional Grid Options

The following grid options can be configured by props:

- `align` - `"start" | "center" | "end" | "stretch"`
- `fullWidth` - apply `width: 100%`
- `disablePadding` - do not apply the default padding

See the example below to see how these props can be used.

```demo source="./AdditionalGridOptionsExample.tsx" disableBox

```

## Material Grid Example

The material design grid system is defined as:

- 4 columns on mobile
- 8 columns on tablet
- 12 columns on desktop

The material grid is no longer supported out of the box (ha) anymore but can be
re-created using the `gridColumns` prop and setting the `grid-column` CSS
property on cells to span multiple columns.

```demo source="./MaterialGridExample.tsx" disableBox

```

### Material Grid Customization

If the material grid system is actually still useful, it is recommended
to create a few utility classes to help position grid items.

> !Warn! This is not natively supported by `react-md` since I've never needed
> to create layouts that could not be solved with the non-material design grid
> system.

Here's an example:

```demo source="./MaterialGridCustomizationExample.tsx" disableBox

```

## Box Class Name Function

The box styles can also be applied using the `box` class name function. It
supports all the box styling options and can be applied to any element that
supports `display: flex` or `display: grid`.

> !Warn! Setting the `gridColumns` to a number with the `box` class name
> function does not enforce the provided number of columns like the `Box`
> component. It will only update the `--rmd-box-item-min-size` to `0`.
> Use the `boxStyles` utility if the number of columns must be enforced.

```demo source="./BoxClassNameFunctionExample.tsx" disableBox

```

### Box Styles Utility Function

If the number of columns or item size need to be controlled, use the
`boxStyles` utility function instead. It returns a `style` object with CSS
variables and the corresponding class names.

```demo source="./BoxStylesUtilityFunctionExample.tsx" disableBox

```
